<template>
  <VanConfigProvider :theme="mode">
    <NavBar v-if="!route.meta?.hideNavBar"  />
    <router-view v-slot="{ Component, route }">
      <section class="app-wrapper" :class="{ 'no-padding': route.path === '/' }">
        <keep-alive :include="keepAliveRouteNames">
          <component :is="Component" :key="route.name" />
        </keep-alive>
      </section>
    </router-view>
    <TabBar v-if="['/about', '/products', '/profile', '/'].includes(route.path)" />
  </VanConfigProvider>
</template>

<script setup lang="ts">
import useAutoThemeSwitcher from '@/hooks/useAutoThemeSwitcher'
import useAppStore from '@/stores/modules/app'
import useRouteCache from '@/stores/modules/routeCache'
import { storeToRefs } from 'pinia'
import { computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

// 调试输出当前路由情况
const route = useRoute()

watch(() => route.name, (newRouteName) => {
  console.log('App.vue - newRouteName:', newRouteName)
  console.log('App.vue - meta:', route.meta)
  console.log('App.vue - hideNavBar:', route.meta?.hideNavBar)
})

useHead({
  title: 'EstelarOlas',
  meta: [
    {
      name: 'description',
      content: 'EstelarOlas Investment Platform is a high-return, low-threshold investment channel for the semiconductor industry created specifically for global investors. As the world\'s leading analog/mixed-signal semiconductor technology foundry, EstelarOlas drives innovation in high-growth markets such as automotive, industrial, and medical through advanced manufacturing technology and strong R&D capabilities.',
    },
    {
      name: 'theme-color',
      content: () => isDark.value ? '#00aba9' : '#ffffff',
    },
  ],
  link: [
    {
      rel: 'icon',
      type: 'image/svg+xml',
      href: () => preferredDark.value ? '/favicon-dark.ico' : '/favicon.ico',
    },
  ],
})

const appStore = useAppStore()
const { mode } = storeToRefs(appStore)

const { initializeThemeSwitcher } = useAutoThemeSwitcher(appStore)

const keepAliveRouteNames = computed(() => {
  return useRouteCache().routeCaches as string[]
})

onMounted(() => {
  initializeThemeSwitcher()
})
</script>

<style scoped>
.app-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
  height: 100%;
}

.no-padding {
  padding: 0;
  margin-top: 0;
}

:deep(.van-theme-dark) {
  --van-background: #1E0E33; /* 全局背景色 */
}

:deep([data-route-name="home"]) {
  padding: 0;
}

</style>
